<template>
  <el-backtop :bottom="100" style="width: 54px;height: 54px;">
    <div
        style="
        padding-top: 18px;
        height: 75%;
        width: 100%;
        background-color: #00c792;
        box-shadow: var(--el-box-shadow-lighter);
        text-align: center;
      "
    >
      <img src="../../assets/向上箭头.png" style="width: 30px;height: 25px;">
    </div>
  </el-backtop>
  <div class="detailBody">
    <el-breadcrumb :separator-icon="ArrowRight" class="detail_breadcrumb">
      <el-breadcrumb-item class="detail_breadcrumb_item1" :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item class="detail_breadcrumb_item1" :to="{ path: '/hospital_list'}">查医院</el-breadcrumb-item>
      <el-breadcrumb-item>医院</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="info">
      <div class="hos_header">
        <span class="DetailImg">
          <img :src="hospital.hospital_info.cover" style="width: 99px;height: 68px;overflow-clip-margin: content-box;overflow: clip;"/>
        </span>
        <span class="hos_name">{{ hospital.hospital_info.name }}</span>
        <span class="hos_level">{{ hospital.hospital_info.get_level_display }}</span>
        <br/><br/>
        <img src="../../assets/电话.png" style="width: 12px;height: 12px"/>
        <span style="font-size: 13px;padding-left: 5px;color: #252A33;">{{ hospital.hospital_info.tel }}</span>
        <br/>
        <img src="../../assets/位置.png" style="width: 12px;height: 12px"/>
        <span style="font-size: 13px;color: #252A33;">
          主院区地址：{{ hospital.hospital_info.address }}
        </span>
      </div>
      <el-divider content-position="center" style="margin-top: 30px;margin-bottom: 30px;" />
      <div>
        <h3 style="font-size: 20px;font-weight: 500;line-height: 1.2;color: #252a33;padding-bottom: 20px;margin-left: 20px;">医院简介</h3>
        <div style="padding-right: 25px;padding-left: 20px;color: #444c57;font-size: 16px">
          <span class="hos_content" :style="clamped ? 'display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; overflow: hidden;' : ''">
            {{ hospital.hospital_info.profile }}
          </span>
          <div style="color: #00c792;text-align: right;cursor: pointer;font-weight: 200;font-size: 16px;" @click="isshow">{{ clamped ? '展开全部' :'收起简介' }}</div>
        </div>
        <el-divider content-position="center" style="margin-top: 30px;margin-bottom: 30px;" />
      </div>
      <div>
        <h3 style="font-size: 20px;font-weight: 500;line-height: 1.2;color: #252a33;margin-left: 20px;">入驻医生</h3>
        <el-row :gutter="1" class="row-style" justify="start">
            <el-col :span="8" class="col-style" v-for="(item, key) in hospital.doctor_list" :key="key">
              <el-card shadow="hover" class="rightCard" @click="toDoctor(item.id)">
                <img class="doctor_avatar" :src="item.avatar"/>
                <div class="doctor_info">
                  <el-text style="font-size: 16px;color: #444c57;margin-left: 5px;">{{ item.name }}</el-text>
                  <br/>
                  <span style="font-size: 12px;color: #6C7480;margin-left: 5px;">{{ item.title }}&nbsp;</span>
                  <span style="font-size: 12px;color: #6C7480;">{{ item.department }}</span>
                  <br/>
                  <span>
                    <el-text style="font-size: 12px;
                        color: #6C7480;
                        margin-top: 5px;
                        margin-left: 45px;
                        line-height: 1.54;
                        display: -webkit-box;
                        word-break: break-all;
                        overflow: hidden;
                        -webkit-line-clamp: 1;
                        text-overflow: ellipsis;
                        -webkit-box-orient: vertical;
                        white-space: normal !important;">
                      {{ item.hospital }}
                    </el-text>
                  </span>
                  <br/>
                  <span style="margin-left: 40px;font-size: 12px;color: #00c792;">￥{{ item.price }}&nbsp;</span>
                  <span style="font-size: 12px;color: #6C7480;">&nbsp;{{ item.star }}分&nbsp;</span>
                  <span style="font-size: 12px;color: #6C7480;">&nbsp;{{ item.answer }}月回答</span>
                </div>
              </el-card>
            </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, watch, onMounted} from "vue";
import { ElMessage } from "element-plus";
import { ArrowRight } from '@element-plus/icons-vue'
import {useRouter, useRoute} from "vue-router";
import hospital from "../../api/hospital.js";
import settings from "../../settings.js";
import doctor from "../../api/doctor.js";
const router = useRouter()
const route = useRoute()
let clamped = ref(true);

const isshow=()=>{
  clamped.value = !clamped.value
}

onMounted(()=>{
  const id = route.query.id
  hospital.get_hospital_info(id)
})

const toDoctor=(id)=>{
  // doctor.doctor_id = id
  router.push(`/doctor?id=${id}`)
}

</script>

<style scoped>
.detailBody{
  width: 100%;
  height: 1000px;
  margin-top: 150px;
  background-color: #f2f3f5;
}

.detail_breadcrumb{
  padding-top: 1%;
  margin-left: 10%;
  font-size: 12px;
}

.detail_breadcrumb_item1 >>> .el-breadcrumb__inner{
  color: #00c792;
  cursor: pointer;
}


.detail_breadcrumb_item1 >>> .el-breadcrumb__inner.is-link:hover{
  text-decoration: underline; /* 下划线样式 */
  cursor: pointer;
}

.info{
  position: absolute;
  margin-top: 30px;
  margin-left: 150px;
  width: 60%;
  height: 1000px;
  background-color: white;
}

.hos_header {
  padding-top: 15px;
}

.DetailImg{
  width: 100px;
  height: 100px;
  min-width: 100px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, .05);
  overflow: hidden;
  box-sizing: border-box;
  float: left;
  margin-right: 20px;
  margin-left: 20px;
  object-fit: contain;
  display: flex;
  align-items: center;
  justify-content: center;
}


.hos_name {
  margin-top: 10px;
  padding-top: 10px;
  font-size: 28px;
  font-weight: 600;
  line-height: 32px;
  color: #252a33;
  margin-right: 12px;
}

.hos_level{
  background-color: #fff4e5;
  color: #ffb54c;
  font-size: 12px;
}
.row-style {
  padding-left: 30px;
}
.col-style {
  padding-bottom: 10px;
  background-color: white;
}
.rightCard{
  width: 260px;
  height: 150px;
  background-color: #fafafa;
}
.doctor_avatar {
  width: 40px;
  height: 40px;
  float: left;
  border-radius: 50px;
}

</style>